<template>
	<div class="PublicPraise">
		<div class="tab">
			<ul class="tab-list">
				<li @click="toggleTab(AllPraise)" :class='{active:AllPraise}'>全部评价</li>
				<li @click="toggleTab(GoodPraise)" :class='{active:GoodPraise}'>好评</li>
				<li @click="toggleTab(BadPraise)" :class='{active:BadPraise}'>差评</li>
				<li @click="toggleTab(Sunburn)" :class='{active:Sunburn}'>晒单</li>
			</ul>
		</div>
		<div class="tab-content">
			<AllPraise :is="currentTab" keep-alive></AllPraise>
		</div>
	</div>
</template>

<script>
	import AllPraise from "./PublicPraise/AllPraise"
	import GoodPraise from "./PublicPraise/GoodPraise"
	import BadPraise from "./PublicPraise/BadPraise"
	import Sunburn from "./PublicPraise/Sunburn"
	export default{
		name:'PublicPraise',
		
		data(){
			return{
				AllPraise:'AllPraise',
				GoodPraise:'GoodPraise',
				BadPraise:'BadPraise',
				Sunburn:'Sunburn',
				currentTab:'AllPraise' 
			}
		},
		
		components:{
			AllPraise,
			GoodPraise,
			BadPraise,
			Sunburn
		},
		
		methods:{
			toggleTab(tab){
				this.currentTab = tab;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.PublicPraise .tab{
		border-top: 1px solid #ccc;
	}
	.PublicPraise .tab-list{
		width:690px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		margin: 0 auto;
		padding:10px 0;
	}
	.PublicPraise .tab-list li{
		width:135px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 24px;
		background: #999;
		color:#fff;
		border-radius: 20px;
	}
	.PublicPraise .active{
		background: #ff9900;
		color:#fff;
	}
</style>